<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>156_Event对象</title>
		<style>
			#box1 {
				width: 300px;
				height: 300px;
				background-color: greenyellow;
			}

			#box2 {
				width: 200px;
				height: 200px;
				background-color: gold;
			}

			#box3 {
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		<a id="chao" href="https://lilichao.com">超链接</a>
		<script>
			/* 在DOM中存在着多种不同类型的事件对象
				-多种事件对象有一个共同的祖先Event
					event.eventPhase 表示事件触发的阶段,//1 捕获阶段 2目标阶段 3冒泡阶段
					event.target 触发事件的对象
					event.currentTarget 绑定事件的对象(同this)
					event.stopPropagation()停止事件的传导
					event.preventDefault()取消默认行为
					event.clientX或者event.x  鼠标的x坐标 
					event.clientY或者event.y  鼠标的y坐标
				-事件的冒泡(bubble)
					-冒泡是默认存在的。不管你有没有绑定事件。
					-事件的冒泡就是指事件的向上传到
					-当元素上的某个事件被触发后，其祖先元素上的相同事件也会同时被触发
					-冒泡的存在大大的简化了代码的编写，但是在一些场景下我们并不希望冒泡存在
						不希望事件冒泡时，可以通过事件对象来取消冒泡.
			 */
			const box1 = document.getElementById("box1")
			const box2 = document.getElementById("box2")
			const box3 = document.getElementById("box3")
			const link = document.getElementById("chao")

			link.onclick = function(event) {
				//alert("点击超链接了")
				//return false; //前面讲过，这样可以取消默认行为
			}

			link.addEventListener("click", evnet => {
				evnet.preventDefault();
				alert("点击超链接了")
			})

			box1.addEventListener("click", function(event) {
				/* 
				在事件的响应函数中:
					event.target 表示的是触发事件的对象
					this 绑定事件的对象
					再这个事件中，事件是绑在box1的，同时也是box1触发的。
				 */
				/* 添加一个box3,如果box3没有绑定事件，点击box3后，事件仍会传到box2和box1。
				这时event.target是box3，而this是box1
				 */
				console.log(event.target);
				console.log(this);
				alert("box1")
			})

			box2.addEventListener("click", function(event) {
				alert("box2")
			})

			/* 冒泡是默认存在的。不管你有没有绑定事件。
			   这里box3没有绑定事件，点击box3仍然会有将事件传递到box2和box1
			 */
			/* box3.addEventListener("click", function(event) {
				alert("box3")
				event.stopPropagation() //取消事件冒泡
			}) */
		</script>
	</body>
</html>